<template>
  <div>
    <el-table :size="size" border :data="!pagination?.localPage ? tableData : tableData.filter((ele, i) => {
      return i >= (paging.current - 1) * paging.size && i < (paging.current - 1) * paging.size + paging.size
    })" style="width: 100%" :height="height" class="main-table" @select="select" @select-all="selectAll"
      v-loading="loading">
      <template v-for="(ele, i) in columns">
        <!-- 这是表格第一列的checkbox 和序号的 -->
        <el-table-column :key="i + '-0'" :align="ele.align || 'center'" :type="ele.type" :width="ele.width"
          v-if="ele.type" :label="ele.title" :fixed="ele.fixed || false" v-bind="ele.attrs" />
        <!-- 这是普通的 -->
        <el-table-column :key="i + '-1'" :prop="ele.dataIndex" :label="ele.title" :min-width="ele.width"
          v-if="!ele.render?.length && !ele.type" :align="ele.align || 'center'" :fixed="ele.fixed || false" />
        <!-- 这是写render自定义-->
        <el-table-column :key="i + '-2'" :prop="ele.dataIndex" :label="ele.title" :width="ele.width"
          v-if="ele.render?.length && !ele.type" :align="ele.align || 'center'" :fixed="ele.fixed || false"
          :show-overflow-tooltip="ele.showOverflowTooltip || showOverflowTooltip">
          <template #default="{ row }">
            <div class="components">
              <div v-for="(item, ii) in ele.render" class="components_item" :key="ii"
                v-show="item.isHide ? !item?.isHide(row) : true">
                <component :is="item.isName" :row="row" @click="item.click && item.click(row)" :type="item.type"
                  :size="item?.sizi || 'mini'" :icon="item.icon || ''">
                  {{ typeof item.text === 'string' ? item.text : item.text(row) }}
                </component>
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-if="showPagination">
      <div></div>
      <el-pagination :disabled="loading" background layout="total, sizes, prev, pager, next, jumper"
        :page-size="paging.size" :total="!pagination?.localPage ? paging.total : tableData?.length"
        :page-sizes="paging.pageSizes" :current-page="paging.current" @size-change="sizeChange"
        @current-change="currentChange" />
    </div>
  </div>
</template>

<script setup>
/**
 * pagination:{
 * localPage:true, //本地分页
 * }
 * 
*/
import { defineProps, reactive, watch, computed } from 'vue'
import _ from 'lodash'
const props = defineProps({
  data: Array,
  columns: Array,
  pagination: {
    type: Object,
    default: () => { return {} }
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  height: {
    type: String,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: ''
  },
  showOverflowTooltip: {
    type: Boolean,
    default: true
  }
})

const tableData = computed(() => props.data)
const emits = defineEmits(['select', 'select-all'])

const paging = reactive({
  pageSizes: [10, 20, 30, 40, 50],
  total: 0, //总条数
  current: 1, //当前页
  size: 20//每页多少条
})
const sizeChange = (_v) => {
  paging.size = _v
  if (props?.pagination?.onChange) props.pagination?.onChange({ page: paging.current, pageNum: paging.current, pageSize: paging.size, limit: paging.size })
}
const currentChange = (_v) => {
  paging.current = _v
  if (props?.pagination?.onChange) props.pagination?.onChange({ page: paging.current, pageNum: paging.current, pageSize: paging.size, limit: paging.size })
}
const select = (_selection, _row) => {
  let selection = _.cloneDeep(_selection)?.map((ele) => {
    for (const key in ele) {
      delete ele[key + '__isshow']
      delete ele[key + '__isKey']
    }
    return ele
  })
  let row = { ..._row }
  for (const key in row) {
    delete row[key + '__isshow']
    delete row[key + '__isKey']
  }
  props.columns.find((ele) => ele.type).click && props.columns.find((ele) => ele.type).click(selection, row)
  emits('select', selection, row)
}
const selectAll = (_selection) => {
  let selection = _.cloneDeep(_selection)?.map((ele) => {
    for (const key in ele) {
      delete ele[key + '__isshow']
      delete ele[key + '__isKey']
    }
    return ele
  })
  emits('select-all', selection)
  props.columns.find((ele) => ele.type).click && props.columns.find((ele) => ele.type).click(selection)
}

watch(() => props.pagination, () => {
  if (props?.pagination) {
    Object.keys(props.pagination).forEach(ele => {
      paging[ele] = props.pagination[ele]
    })
  }
}, { deep: true })

</script>
<style lang="scss">
.components {
  display: flex;
  justify-content: space-around;

  .components_item {
    margin-right: 5px;
  }
}

.pagination {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>
